"use strict";
import * as React from 'react';
import { commonStyles } from "../assets/styles/common";
import { myTabBarStyles } from "../assets/styles/tabBar";
import MyText from "./MyText";
import Colors from "../assets/styles/Colors";
import Line from "./Line";
import { SCREEN_WIDTH } from "../constant";
const { View, TouchableOpacity } = require('react-native');
const { connect } = require('react-redux');
class MyTabBar extends React.Component {
    constructor(props, context) {
        super(props, context);
        this._changeTabs = (currentIndex) => {
            if (this.props.onChange) {
                this.props.onChange({ index: currentIndex, text: this.props.tabs[currentIndex] });
            }
        };
        this.lineWidth = SCREEN_WIDTH / props.tabs.length * 0.8;
        this.offset = (SCREEN_WIDTH / props.tabs.length - this.lineWidth) / 2;
    }
    render() {
        return (<View style={[commonStyles.flexRow, myTabBarStyles.container, commonStyles.relative]}>
                {this.props.tabs.map((item, index) => (<View key={index} style={[commonStyles.flex1, commonStyles.flexRow, { alignItems: 'center' }]}>
                        <TouchableOpacity key={index} style={[commonStyles.flex1, commonStyles.centerVH]} onPress={this._changeTabs.bind(this, index)}>
                            <MyText color={index === this.props.currentTab ? Colors.Primary : Colors.SubTitle}>{item}</MyText>
                        </TouchableOpacity>
                        {index === this.props.tabs.length - 1 ? null : <Line width={1} height={'50%'}/>}

                    </View>))}
                <Line width={this.lineWidth} height={1} color={Colors.Primary} style={[commonStyles.absolute, { bottom: 0,
                left: SCREEN_WIDTH / this.props.tabs.length * this.props.currentTab + this.offset }]}/>
            </View>);
    }
}
MyTabBar.defaultProps = {
    currentTab: 0
};
export default MyTabBar;
